import React, { useContext } from 'react';
import './index.less'
import { ConfigContext } from '../../configProvider';
import cn from 'classnames'
import IconFont from '../../iconfont';
interface Props {
    disabled?: boolean,
    checked?: boolean,
    classname?: string,
    style?: object,
    onClick?: React.MouseEventHandler<HTMLLabelElement>,
    onChange?: React.MouseEventHandler<HTMLLabelElement>
}

export default (props: Props) => {
    const { disabled, checked, classname, style, onClick, onChange } = props
    const { prefix } = useContext(ConfigContext)
    const pf = prefix + '-switch'
    const classes = cn(pf, {
        [`${pf}-disabled`]: disabled,
    }, classname)
    const handleClick: React.MouseEventHandler<HTMLLabelElement> = (event) => {
        if (onClick) {
            onClick(event)
        }
    }
    const handleChange: React.MouseEventHandler<HTMLLabelElement> = (event) => {
        if (onChange) {
            onChange(event)
        }
    }
    return (
        <label className={classes} style={style}
            onClick={disabled ? undefined : handleClick}
            onChange={disabled ? undefined : handleChange}>
            <input type="checkbox" defaultChecked={checked} disabled={disabled}></input>
            <span className="slider">
                {disabled ? <IconFont name='lock-off' className='lock' color={checked ? '#007bff' : 'gray'} /> : null}
            </span>
        </label>
    )
};
